<template>
  <div class="list-wrap">
    <div>
      <ListRated />
      <ListMovies @finish="finish" ref="movies" @finishmore="finishmore" />
      <div v-if="show">我是有底线的</div>
    </div>
  </div>
</template>

<script>
import ListRated from "./components/ListRated.vue";
import ListMovies from "./components/ListMovies.vue";

import BScroll from "better-scroll";

let bs;
export default {
  data() {
    return {
      show: false,
    };
  },
  components: {
    ListRated,
    ListMovies,
  },

  methods: {
    finish() {
      // console.log("请求结束了");
      bs = new BScroll(".list-wrap", {
        scrollX: false,
        scrollY: true,
        click: true,
        //todo 允许我们使用上拉加在功能
        // pullUpLoad: true,
        pullUpLoad: {
          // threshold阈值
          threshold: 100,
        },
      });
      bs.on("pullingUp", () => {
        // console.log("我拉到底了");
        this.$refs.movies.getMore();
      });

      //todo bs.refresh()重新计算高度
      //todo bs.finishPullUp()用来告诉bs，这一次的下拉结束了，可以进行下一次的下拉了
    },
    finishmore(done) {
      bs.refresh();
      if (!done) {
        bs.finishPullUp();
      } else {
        this.show = true;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.list-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
